<template>
  <div id="app">
    <el-table ref="multipleTable" :data="tableData" border style="width: 100%"
              @selection-change="handleSelectionChange">
      <el-table-column align="center" sortable prop="sn" label="编号" type="selection"
                       show-overflow-tooltip></el-table-column>
      <el-table-column align="center" sortable prop="deptName" label="部门名称"></el-table-column>
      <el-table-column align="center" sortable prop="manager" label="部门管理员"></el-table-column>
      <el-table-column align="center" sortable prop="state" label="状态" min-width="50">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.state=='1'?nshow:fshow" active-color="#13ce66" inactive-color="#ff4949"
                     @change="editType(scope.$index, scope.row)"></el-switch>
        </template>
      </el-table-column>
      <el-table-column align="center" sortable prop="createTime" label="创建时间"></el-table-column>
      <el-table-column prop="" label="操作">
        <template slot-scope="scope">
          <el-button size="small" type="primary" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑
          </el-button>
          <el-button size="small" type="danger" icon="el-icon-delete" @click="deleteDept(scope.$index, scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--  分页插件  -->
    <el-pagination
        background
        layout="total,sizes, prev, pager, next, jumper"
        :total="total" :current-page="currentPage" :page-size="pageSize"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        style="margin-top: 20px">
    </el-pagination>


  </div>
</template>

<script>


export default {
  data() {
    return {
      tableData: [],
      nshow: true, //switch开启
      fshow: false, //switch关闭
      total: 0,
      currentPage: 1,
      pageSize: 10,
      multipleSelection: [],
      dialogVisible: false
    }
  },
  mounted() {
    //vue加载完成，发送ajax请求动态获取数据
    this.getList();
  },

  methods: {
    getList() {
      let param = {"currentPage": this.currentPage, "pageSize": this.pageSize}
      this.$http.post("/dept/list", param).then(res => {
        this.tableData = res.data.data;
        this.total = res.data.totals
        console.log('res.data:' + res.data.totals)
      }).catch(res => {
        alert('出错啦')
      })
    },
    deleteDept(index,row) {
      this.$confirm('确定要删除吗?', '信息', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then((res) => {
        //执行删除
      })
    },

    editType(index, row) {
      console.log(index + ':' + row)
      if (row.state == 1) {
        row.state = 0;
      } else {
        row.state = 1
      }
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.getList();
      console.log(this.currentPage);
    },

    handleSizeChange(val) {
      this.pageSize = val
      this.getList();
      console.log(val);
    },
    handleSelectionChange(val) {
      console.log(val);
      this.multipleSelection = val;
    }
  },

}
</script>
<style>


</style>
